*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font: bold 20px "Courier";
}

#main{
	width: 100vw;
	height: 420px;
	background-color: pink;
	margin: 20px auto;
	//border: 10px solid black;
	border-radius: 20px;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: space-around;
	#stage{
		width: 304px;
		height: 304px;
		border: 2px solid black;
		position: relative;
		#snake{
			&>div{
				width: 10px;
				height: 10px;
				background-color: black;
				border: 1px solid pink;
				position: absolute;
			}
		}
		#food{
			width: 10px;
			height: 10px;
			//border: 1px solid pink;
			position: absolute;
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
			align-content: space-between;

			left: 40px;
			top: 100px;

			&>div{
				width: 4px;
				height: 4px;
				background-color: black;
				transform: rotate(45deg);
			}
		}
	}
	#score-panel{
		display: flex;
		width: 300px;
		justify-content: space-between;
	}
}

.operate{
	display: flex;
	flex-flow: column;
	align-items: center;
	.left_right{
		margin: 10px 0;
		button{
			margin: 0 40px;
		}
	}
	button{
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
}